<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夏吉尔团信息汇总展示</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style_bgPage.css">
    <meta name="theme-color" content="#563d7c">
  </head>
  <body>
    
<div class="container">
  <header class="blog-header py-3">
    <div class="row flex-nowrap justify-content-between align-items-center">
      <div class="col-4 pt-1">
        <a class="text-muted" href="#"></a>
      </div>
      <div class="col-4 text-center">
        <a class="blog-header-logo text-dark" href="#">夏吉尔</a>
      </div>
      <div class="col-4 d-flex justify-content-end align-items-center">

      </div>
    </div>
  </header>

  <div class="nav-scroller py-1 mb-2">
    <nav class="nav d-flex justify-content-between">
      <a class="p-2 text-muted" href="index.html">首页</a>
      <a class="p-2 text-muted" href="https://docs.qq.com/doc/DZkJPdmN1V1NUZmVE">规则书</a>
      <a class="p-2 text-muted" href="https://docs.qq.com/sheet/DZkdiRE5iRklYRHRa">夏吉尔物价汇总</a>
      <a class="p-2 text-muted" href="createPage.html">车卡区</a>
      <a class="p-2 text-muted" href="simulator.html">战斗模拟器</a>
      <a class="p-2 text-muted" href="luckyDay.html">节日活动</a>
    </nav>
  </div>

  <div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
    <div class="col-md-6 px-0">
      <h1 class="display-4 font-italic">欢迎来到夏吉尔世界</h1>
      <p class="lead my-3">这个页面主要展示最新的跑团信息，当前轮回最新状态数据都会在这里更新。</p>
      <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">如果你已经准备好了，那么可以继续浏览后面的内容~</a></p>
    </div>
  </div>

  <div class="row mb-2">
    <div class="col-md-6">
      <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static">
          <strong class="d-inline-block mb-2 text-primary">笑谈</strong>
          <div class="mb-1 text-muted">学园级</div>
          <div class="mb-1 text-muted">12岁</div>
          <p class="card-text mb-auto">人物卡部分还没做完</p>
          <a href="#" class="stretched-link">详细信息</a>
        </div>
        <div class="col-auto d-none d-lg-block">
          <img class="bd-placeholder-img" style="width: 200px;height: 250px;" src="img/logo.jpg" alt="">  
        </div>
      </div>
    </div>
    <div class="col-md-6">
        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
          <div class="col p-4 d-flex flex-column position-static">
            <strong class="d-inline-block mb-2 text-success">笑谈</strong>
            <div class="mb-1 text-muted">学园级</div>
            <div class="mb-1 text-muted">12岁</div>
            <p class="card-text mb-auto">人物卡部分还没做完</p>
            <a href="#" class="stretched-link">详细信息</a>
          </div>
          <div class="col-auto d-none d-lg-block">
            <img class="bd-placeholder-img" style="width: 200px;height: 250px;" src="img/logo.jpg" alt="">  
          </div>
        </div>
  </div>
</div>

<main role="main" class="container" id="app">
  <div class="row">
    <div class="col-md-8 blog-main">
      <h3 class="pb-4 mb-4 font-italic border-bottom">
        跑团最新播报
      </h3>

      <div class="blog-post">
        <h2 class="blog-post-title">{{news.title}}</h2>
        <p class="blog-post-meta">{{news.time}} by <strong class="text-success">{{news.auther}}</strong></p>

        <div v-html="news.content"></div>
      </div>


      <!-- <nav class="blog-pagination">
        <a class="btn btn-outline-primary" href="#">Older</a>
        <a class="btn btn-outline-secondary disabled">Newer</a>
      </nav> -->

    </div><!-- /.blog-main -->

    <aside class="col-md-4 blog-sidebar">
      <div class="p-4 mb-3 bg-light rounded">
        <h4 class="font-italic">关于夏吉尔</h4>
        <p class="mb-0">一个很老套的冒险世界观，重开的这一轮回将任务系统，剧情系统整合改版，删减了冗余的剧情，希望优化后的体验会让pl们满意吧~</p>
      </div>

      <div class="p-4">
        <h4 class="font-italic">第一轮回2.0跑团记录</h4>
        <ol class="list-unstyled mb-0">
          <li><a href="newsPage.html?id=1">喜迎重开</a></li>

        </ol>
      </div>

      <div class="p-4">
        <h4 class="font-italic">活动记录</h4>
        <ol class="list-unstyled">
          <li><a href="#">目前还没开哦！</a></li>
        </ol>
      </div>
    </aside><!-- /.blog-sidebar -->

  </div><!-- /.row -->

</main><!-- /.container -->

<footer class="blog-footer">
  <p>团内一切解释权归小野寺春</p>
  <p>
    <a href="#">回到顶部</a>
  </p>
</footer>

<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script type="module">
    import {newsList} from './js/data.js'
    var app = Vue.createApp({
        data() {
            return {
                newsList: newsList,
                news:{},
            }
        },
        mounted(){
            this.getNews(1)
        },
        methods: { //函数方法集
            getNews:function(id){
                this.newsList.forEach(item=>{
                    if(item.id == id){
                        this.news = item
                    }
                })
            }

        }
    })
    app.mount('#app')
    
  </script>   
  

</body></html>